<template>
    <div class="tableBox">
        <div class="statisticsTop">
            <div class="categoryBox" v-for="(item, index) in categoryList" :key="index">
                <div class="left">
                    <svg-icon :icon-class="`${'pic' + (index + 1)}`" class-name="" class="pic1" />
                </div>
                <div class="right">
                    <div class="Value">{{ item.value }}</div>
                    <div class="name">{{ item.name }}</div>
                </div>
            </div>
        </div>
        <div class="tableBoxCard" :style="{ height: Height2 + 'px' }">
            <el-table :data="tableData" style="width: 100%" stripe :height="Height" :max-height="Height"
                :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :stripe="true"
                    :label="column.label">
                    <template slot-scope="scope">
                        <div v-if="column.prop === 'tenCarPhoto' || column.prop === 'tenPeoplePhoto'"
                            v-viewer="{ movable: false }">
                            <img v-for="(item, index) in scope.row[column.prop] === null || scope.row[column.prop] === '' || scope.row[column.prop] === undefined ? [] : scope.row[column.prop].split(',')"
                                :key="index" :src="item" alt="图片" style="width: 50px; height: 50px;margin: 0 5px;">
                        </div>

                        <div v-else-if="column.prop === 'state'">
                            <span v-if="scope.row[column.prop] == 0" style="color: rgb(40, 160, 95);">正常打卡</span>
                            <span v-else-if="scope.row[column.prop] == 1" style="color: rgb(215, 25, 41);">未打卡</span>
                            <span v-else-if="scope.row[column.prop] == 2" style="color: rgb(215, 25, 41);">超时打卡</span>
                            <span v-else-if="scope.row[column.prop] == 3" style="color: rgb(215, 25, 41);">越界打卡</span>
                        </div>
                        <span v-else>{{ scope.row[column.prop] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="page" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>

        </div>
        <el-dialog title="详情" :visible.sync="dialogVisible" width="700px" :before-close="handleClose">

            <div style="margin-bottom: 20px;" v-for="(item, index) in columns" :key="index">
                <div v-if="item.label !== 'ID'" style="display: flex;">
                    <div class="justifiedText">{{ item.label }}</div>
                    <div style="color: #000;font-size: 16px;">：</div>
                    <div style="width: 550px;">
                        <div v-if="item.prop === 'tenCarPhoto' || item.prop === 'tenPeoplePhoto'"
                            v-viewer="{ movable: false }">
                            <img v-for="(item, index) in infoData[item.prop] === null || infoData[item.prop] === '' || infoData[item.prop] === undefined ? [] : infoData[item.prop].split(',')"
                                :key="index" :src="item" alt="图片" style="width: 50px; height: 50px;margin: 0 5px;">
                        </div>
                        <div v-else-if="item.prop === 'state'">
                            <span v-if="infoData[item.prop] == 0" style="color: rgb(40, 160, 95);">正常打卡</span>
                            <span v-else-if="infoData[item.prop] == 1" style="color: rgb(215, 25, 41);">未打卡</span>
                            <span v-else-if="infoData[item.prop] == 2" style="color: rgb(215, 25, 41);">超时打卡</span>
                            <span v-else-if="infoData[item.prop] == 3" style="color: rgb(215, 25, 41);">越界打卡</span>
                        </div>

                        <div style="color: #000;font-size: 16px;" v-else>{{ infoData[item.prop] }}</div>
                    </div>

                </div>
            </div>
            <div style="margin-bottom: 10px;" v-if="categoryList[0].name !== '十人十车总数'">
                <div style="display: flex;">
                    <span class="justifiedText">照片</span>
                    <span style="color: #000;font-size: 16px;">：</span>
                    <div v-viewer="{ movable: false }">
                        <img v-for="(item, index) in infoData.checkPhotoList" :key="index" :src="item" alt="图片"
                            style="width: 80px; height: 80px;margin: 0 5px;">
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    qryProtectSchoolById,
    qryPointById,
    qryDoublePatrolById,
    qryRoadDetailById,
    qryTrafficDetailById,
    qryTenDetailById,
    qryPatrolById
} from '@/api/statistics'
export default {
    data() {
        return {
            dialogVisible: false,
            total: 0,
            page: 1,
            pageSize: 10,
            Height: window.innerHeight - 430,
            Height2: window.innerHeight - 360,
            categoryList: [{
                name: '护校总数',
                value: 0
            }, {
                name: '应打卡数',
                value: 0
            }, {
                name: '实际打卡数',
                value: 0
            }, {
                name: '异常打卡数',
                value: 0
            }],
            tableData: [],
            columns: [],
            infoApi: null,
            infoData: {}
        }
    },
    methods: {
        handleDetail(row) {
            console.log(row.id)

            this.infoApi(row.id).then(res => {
                this.infoData = res.data
                this.dialogVisible = true
            })
        },
        handleClose(done) {
            done();
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page = val
            console.log(`当前页: ${this.page}`);
            this.$emit('handleCurrentChange')
        },
        setTableLable(val) {
            switch (val) {
                case 1:
                    this.categoryList[0].name = '护校总数'
                    this.columns = [
                        { prop: 'id', label: 'ID' },
                        { prop: 'police', label: '民警' },
                        { prop: 'policeNum', label: '警号' },
                        { prop: 'policeColleague', label: '同行民警' },
                        { prop: 'school', label: '学校名称' },
                        { prop: 'wornCamera', label: '执法记录仪' },
                        { prop: 'createTime', label: '打卡时间' },
                        { prop: 'dutyAddr', label: '打卡位置' },
                        { prop: 'state', label: '状态' },
                        { prop: 'remark', label: '备注' },
                    ];
                    this.infoApi = qryProtectSchoolById
                    break;
                case 2:
                    this.categoryList[0].name = '必到点总数'
                    this.columns = [
                        { prop: 'id', label: 'ID' },
                        { prop: 'police', label: '民警' },
                        { prop: 'policeNum', label: '警号' },
                        { prop: 'address', label: '必到点' },
                        { prop: 'wornCamera', label: '执法记录仪' },
                        { prop: 'startDate', label: '开始时间' },
                        { prop: 'endDate', label: '结束时间' },
                        { prop: 'createTime', label: '打卡时间' },
                        { prop: 'dutyAddr', label: '打卡位置' },
                        { prop: 'state', label: '状态' },
                        { prop: 'remark', label: '备注' },
                    ];
                    this.infoApi = qryPointById
                    break;
                case 3:
                    this.categoryList[0].name = '双进巡查点总数'
                    this.columns = [
                        { prop: 'id', label: 'ID' },
                        { prop: 'police', label: '民警' },
                        { prop: 'address', label: '巡查地址' },
                        { prop: 'wornCamera', label: '执法记录仪' },
                        { prop: 'createTime', label: '上报时间' },
                        { prop: 'remark', label: '备注' },
                    ];
                    this.infoApi = qryDoublePatrolById
                    break;
                case 4:
                    this.categoryList[0].name = '路长制总数'
                    this.columns = [
                        { prop: 'id', label: 'ID' },
                        { prop: 'police', label: '民警' },
                        { prop: 'address', label: '执勤道路' },
                        { prop: 'wornCamera', label: '执法记录仪' },
                        { prop: 'dispersal', label: '驱离' },
                        { prop: 'posting', label: '贴单' },
                        { prop: 'createTime', label: '上报时间' },
                        { prop: 'state', label: '状态' },
                        { prop: 'remark', label: '备注' },
                    ];
                    this.infoApi = qryRoadDetailById
                    break;

                case 5:
                    this.categoryList[0].name = '交通整治总数'
                    this.columns = [
                        { prop: 'id', label: 'ID' },
                        { prop: 'police', label: '民警' },
                        { prop: 'trafficAddr', label: '交通道路' },
                        { prop: 'wornCamera', label: '执法记录仪' },
                        { prop: 'address', label: '岗位地址' },
                        { prop: 'createTime', label: '上报时间' },
                        { prop: 'state', label: '状态' },
                        { prop: 'remark', label: '备注' },
                    ];
                    this.infoApi = qryTrafficDetailById
                    break;
                case 6:
                    this.categoryList[0].name = '十人十车总数'
                    this.columns = [
                        { prop: 'id', label: 'ID' },
                        { prop: 'police', label: '姓名' },
                        { prop: 'upDate', label: '上传日期' },
                        { prop: 'createTime', label: '上报时间' },
                        { prop: 'tenPeoplePhoto', label: '十人照片' },
                        { prop: 'tenCarPhoto', label: '十车照片' },
                    ];
                    this.infoApi = qryTenDetailById
                    break;
                case 7:
                    this.categoryList[0].name = '巡逻打卡总数'
                    this.columns = [
                        { prop: 'id', label: 'ID' },
                        { prop: 'police', label: '民警' },
                        { prop: 'deptName', label: '部门' },
                        { prop: 'checkRoute', label: '打卡方式' },
                        { prop: 'checkLocation', label: '巡逻路线' },
                        { prop: 'dutyAddr', label: '打卡位置' },
                        { prop: 'createTime', label: '打卡时间' },
                        { prop: 'state', label: '状态' },
                        { prop: 'remark', label: '备注' },
                    ];
                    this.infoApi = qryPatrolById
                    break;
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.tableBox {
    margin-top: 10px;

    .tableBoxCard {
        width: 100%;
        background: #fff;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 20px;
        margin-top: 10px;

        .pagination {
            margin-top: 10px;
            align-items: center;
        }

    }



    .statisticsTop {
        width: 100%;
        height: 90px;
        background: #fff;
        border-radius: 5px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20px;

        .categoryBox {
            width: 25%;
            display: flex;

            .left {
                margin-right: 10px;

                .pic1 {
                    width: 42px;
                    height: 42px;
                    margin-top: 5px;
                }
            }

            .right {
                .Value {
                    font-size: 25px;
                    font-weight: 600;
                    color: #333;
                }
            }
        }
    }
}

.justifiedText {
    color: #000;
    font-size: 16px;
    width: 80px;
    text-align: justify;
    text-align-last: justify;
    text-justify: distribute-all-lines;
}

.tableBox ::v-deep .el-dialog__body {
    padding: 0 20px 20px 20px;
}

.tableBoxCard ::v-deep .el-table th,
.el-table tr {
    background: #FAFAFA;
    /* 设置你想要的颜色 */
}
</style>